<template>
  <div class="bigBox">
    <div class="dashboard-container">
      <el-card class="square">
        <div class="title">房产月售金额</div>
        <b class="num">120,000</b>
        <div class="footer">
          <div class="footer-left">
            周同比<span class="triangleUp">△</span>12%
          </div>
          <div class="footer-right">
            周同比<span class="triangleDown">▽</span>12%
          </div>
        </div>

      </el-card>
      <el-card class="square">
        <div class="title">月售房产</div>
        <b class="num2">100,00</b>
        <stacked-area />
      </el-card>
      <el-card class="square">
        <div class="title">各项数据比例</div>
        <b class="num2">100%</b>
        <dough-nut />
      </el-card>
      <el-card class="square">
        <div class="title">本月成交订单</div>
        <b class="num2">2450</b>
        <bar />
      </el-card>
    </div>
    <el-card class="bigCard">
      <stacked-line />
    </el-card>
  </div>

</template>

<script>

import { mapGetters } from 'vuex'
import Bar from './component/bar.vue'
import DoughNut from './component/DoughNut.vue'
import stackedArea from './component/stackedArea.vue'
import StackedLine from './component/stackedLine.vue'

export default {
  name: 'Dashboard',
  components: { stackedArea, DoughNut, Bar, StackedLine },
  computed: {
    ...mapGetters([
      'name'
    ])
  }
}
</script>

<style lang="scss" scoped>
.bigBox{
  width: 100%;
  height: 100%;
  margin: 10px auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  // align-items: center;
  .bigCard{
    margin: 10px auto;
    width: 100%;
    height: 100%;
  }
  .dashboard-container {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 10px;
  margin-left: 10px;
  .square{
  margin-right: 6px;
    width: 30rem;
    height: 10rem;
    .title{
      color:grey;
      margin:10px
    }
    .num{
      font-weight:700;
      font-size:50px
    }
        .num2{
      font-weight:700;
      font-size:30px
    }
    .footer{
      display: flex;
      justify-content: space-between;
      align-content: center;
      .footer-left{
        color:grey;
        font-size:10px;
        margin:10px;
        .triangleUp{
       color: red;
       font-size:20px;
       vertical-align:middle;
       margin:10px
       }
      }
      .footer-right{
        color:grey;
        font-size:10px;
        margin:10px;
      .triangleDown{
      color: rgb(30, 244, 30);
      font-size:20px;
      vertical-align:middle;
      margin:10px
      }
      }
    }
  }
  }
}

</style>
